<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>查看考勤</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/globle.css" />
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />

    <style>
        /* body {
      padding-top: 25px;
    } */

        span {
            margin: 10px;
        }

        .Tabl {
            height: 50px;
            width: 88%;
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            margin-left: 6%;
        }

        .Td1 {
            color: #B8B8B8;
            width: 110px;
        }

        .Td2 {
            color: #000000;
            text-align: left;
        }

        .Hr {
            height: 1px;
            width: 96%;
            background-color: #B8B8B8;
            margin-left: 2%;
        }

        .Butt {
            border: 1px solid #B8B8B8;
            border-radius: 20px;
            color: #FFFFFF;
            height: 17px;
            width: 17px;
            outline: none;
        }

        .TabImg {
            height: 150px;
            width: 96%;
            margin-left: 2%;
            border: 10px solid #D8D8D8;
        }

        .TdImg1 {
            height: 110px;
            width: 90px;
        }

        .TdImg2 {
            height: 110px;
            width: 90px;
        }

        .ButAdd {
            height: 110px;
            width: 100px;
            font-size: 100px;
            color: #FFFFFF;
            background-color: #B8B8B8;
        }

        .TabL {
            height: 75px;
            width: 88%;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            margin-left: 6%;
        }

        .ButL {
            height: 40px;
            width: 100%;
            background-color: #1abc9c;
            /* position: fixed; */
            bottom: 0;
        }

        .Td3 {
            text-align: center;
            width: 50%;
        }

        select {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            border: none;
            background: none;
        }
    </style>
</head>

<body id="body">
    <form action="" id="myform">
        <input type="hidden" id="id" name="id">
        <input type="hidden" name="a_tid" id="a_tid">
        <input type="hidden" name="a_area_id" id="a_area_id">
        <input type="hidden" name="a_project_id" id="a_project_id">
        <input type="hidden" name="a_eid" id="a_eid">
        <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">签到信息</button>
        <table class="Tabl">
            <tr>
                <td class="Td1">日期：</td>
                <td class="Td2">
                    <input id="a_createDate" name="a_createDate" readonly />
                </td>
            </tr>
        </table>
        <hr class="Hr" />
        <table class="Tabl">
            <tr>
                <td class="Td1">施工队伍：</td>
                <td class="Td2">
                    <input id="a_name" name="a_name" readonly />
                </td>
            </tr>
        </table>
        <hr class="Hr" />
        <table class="Tabl">
            <tr>
                <td class="Td1">应到人数：</td>
                <td class="Td2">
                    <input type="number" name="a_should_num" id="a_should_num" readonly />
                </td>
            </tr>
        </table>
        <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">上午签到信息</button>
        <table class="Tabl">
            <tr>
                <td class="Td1">上午人数：</td>
                <td class="Td2">
                    <input type="number" readonly name="a_am_num" id="a_am_num" />
                </td>
            </tr>
        </table>
        <hr class="Hr" />
        <table class="Tabl" id="signAmTime">
            <tr>
                <td class="Td1">签到时间：</td>
                <td class="Td2">
                    <input readonly id="a_am_createDate" name="a_am_createDate" readonly />
                </td>
            </tr>
        </table>
        <hr class="Hr" />
        <div style="padding: 10px;">
            <ul class="upload-ul clearfix">
                <li class="upload-pick">
                    <div class="webuploader-container clearfix" id="goodsUpload"></div>
                </li>
                <li>
                    <div id="imgBoxAm" name="a_am_picture"></div>
                </li>
            </ul>
        </div>

        <div id="pm">

            <button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">下午签到信息</button>

            <table class="Tabl">
                <tr>
                    <td class="Td1">下午人数：</td>
                    <td class="Td2">
                        <input type="number" name="a_pm_num" readonly id="a_pm_num" />
                    </td>
                </tr>
            </table>
            <hr class="Hr" />
            <table class="Tabl" id="signPmTime">
                <tr>
                    <td class="Td1">签到时间：</td>
                    <td class="Td2">
                        <input id="a_pm_createDate" name="a_pm_createDate" readonly />
                    </td>
                </tr>
            </table>
            <hr class="Hr" />
            <div style="padding: 10px;" id="pm">
                <ul class="upload-ul clearfix">
                    <ul class="upload-ul clearfix">
                        <li class="upload-pick">
                            <div class="webuploader-container clearfix" readonly id="goodsUpload1"></div>
                        </li>
                    </ul>
                </ul>
            </div>
        </div>
        <div style="
                width: 80%;
                position: absolute;
                left: 10%;
                right: 10;
                top: 60%;
                z-index: 1000000;
                text-align: center;
              " id="bigImage"></div>
        <div style="
                width: 80%;
                position: absolute;
                left: 10%;
                right: 10;
                top: 120%;
                z-index: 1000000;
                text-align: center;
              " id="bigImage1"></div>
    </form>
</body>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script src="../../script/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="../../script/diyUpload1.js" type="text/javascript"></script>
<script src="../../script/webuploader.js" type="text/javascript"></script>
<script type="text/javascript">

    var user = $api.getStorage("userSession");

    var areaId = user.data.areaid;
    var proId = user.data.projectid;
    var userId = user.data.id;
    ////企业id
    var enterpriseId = $api.getStorage("userSession").data.enterprise.id;
    var userName = user.data.name
    var roleId = user.data.sysRole.sysRoleCode.id;
    apiready = function () {
        $("#body").hide()
        api.showProgress({
            title: '拼命加载中...',
            modal: false
        });
        $("#a_eid").val(enterpriseId)
        $("#a_tid").val(user.data.team_id)
        $("#a_area_id").val(areaId)
        $("#a_project_id").val(proId)
        $("#a_name").val(userName);
        var id = api.pageParam.id;
        // alert(typeof id);
        api.ajax(
            {
                url: BaseServiceUrl + "mobile/attendanceAdmin/findOne.json",
                method: "post",
                data: {
                    values: {
                        id: id,
                    },
                },
                timeout: 30,
                dataType: "json",
                returnAll: false,
            },
            function (ret, err) {
                var data = ret.obj;
                if (data.a_pm_num !== null || data.a_pm_num !== "") {
                    loadData1(data)
                    api.hideProgress();
                    $("#body").show()
                } else {
                    loadData(data)
                    api.hideProgress();
                    $("#body").show()
                }
            }
        );

        function loadData1(data) {
            $("#id").val(data.id);
            $("#a_createDate").val(data.a_createDate);
            $("#a_name").val(data.a_name);
            $("#a_should_num").val(data.a_should_num);
            $("#a_am_num").val(data.a_am_num);
            $("#a_pm_num").val(data.a_pm_num);
            $("#a_pm_createDate").val(data.a_pm_createDate);
            $("#a_am_createDate").val(data.a_am_createDate);
            //显示上午图片
            if (null !== data.a_am_picture) {
                $("#goodsUpload").append(
                    '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100" onclick=\'showBig(this)\'  src="' +
                    BaseServiceUrl +
                    data.a_am_picture +
                    '"\/><\/div>'
                );
            }
            //显示下午图片
            if (null !== data.a_pm_picture) {
                $("#goodsUpload1").append(
                    '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100" onclick=\'showBig1(this)\'  src="' +
                    BaseServiceUrl +
                    data.a_pm_picture +
                    '"\/><\/div>'
                );
            }
        }

        //当下午进行考勤时，加载数据
        function loadData(data) {
            $("#id").val(data.id);
            $("#a_createDate").val(data.a_createDate);
            $("#a_name").val(data.a_name);
            $("#a_should_num").val(data.a_should_num);
            $("#a_am_num").val(data.a_am_num);
            $("#a_am_createDate").val(data.a_am_createDate);
            $("#signPmTime").hide()

            if (null !== data.a_am_picture) {
                $("#goodsUpload").append(
                    '<div style="margin-left:5px;float:left;margin-top:5px;"><img width="100" height="100" onclick=\'showBig(this)\'   src="' +
                    BaseServiceUrl +
                    data.a_am_picture +
                    '"\/><\/div>'
                );
            }
        }
        //赋值当日考勤日期
        var thisday = new Date();
        thisday.setTime(thisday.getTime());
        var year = thisday.getFullYear();
        var month = thisday.getMonth() + 1;
        var day = thisday.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var s = year + "-" + month + "-" + day;
        $("#att_time").val(s);
    };

    function showBig(t) {
        document.getElementById("bigImage").innerHTML =
            "<img src='" +
            t.src +
            "' onclick='closeBig(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
    }
    function closeBig(t) {
        document.getElementById("bigImage").innerHTML = "";
    }
    function showBig1(t) {
        document.getElementById("bigImage1").innerHTML =
            "<img src='" +
            t.src +
            "' onclick='closeBig1(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
    }
    function closeBig1(t) {
        document.getElementById("bigImage1").innerHTML = "";
    }
</script>

</html>